<script>
import { ElButton, ElProgress, ElDialog, ElForm, ElFormItem, ElRadio, ElRadioGroup, ElImage, ElColorPicker } from 'element-plus';
import Component0 from './ResumeInformation.vue';
import Component1 from './ProfileSection.vue';
import Component2 from './EducationBack.vue'; 
import Component3 from './JobHunting.vue'; 
import Component4 from './ProjectExperience.vue';
import Component5 from './InternshipExperience.vue';
import Component6 from './CampusExperience.vue';
import Component7 from './SkillPerks.vue';
import Component8 from './HonorCertificates.vue';
import Component9 from './Self-evaluation.vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
    components: {
        ElButton,
        ElProgress,
        ElDialog,
        ElForm,
        ElFormItem,
        ElRadio,
        ElRadioGroup,
        ElImage,
        ElColorPicker,
        Component0,
        Component1,
        Component2,
        Component3,
        Component4,
        Component5,
        Component6,
        Component7,
        Component8,
        Component9
    },
    data() {
        return {
           exportForm: {
          file_type: '', // 导出文件类型
          style_index: 0 // 样式选择索引
          },
          style_list: [ /* 样式列表 */ ],
          my_style_color: '#67C23A', // 自定义样式颜色
          predefineColors: [ /* 预定义颜色列表 */ ],
          dialogFormVisible: false ,// 导出简历对话框可见性
          //新加导出模块代码
          id: 'exampleId',
          completion_progress: 50, // 初始化进度百分比
          progress_colors: '#409EFF', // 初始化进度条颜色
            // 在这里放置组件的数据和方法
            modules: [
              {
          module: 'Component0',
          label:'简历信息',
          show: true,
          ref: 'comp1',
          data: {
                resumeName: ''
              
          }
        },
        {
          module: 'Component1',
          label:'基本信息',
          show: true,
          ref: 'comp1',
          data: {
                name: '',
                gender: 'male',
                age: null,
                email: ''
              
          }
        },
        {
          module: 'Component2', // 此处必须是 'Component2'
          label:'教育背景',
          show: true,
          ref: 'comp2',
          data: {
                school:''
              
          }
        },
        {
          module: 'Component3', // 此处必须是 'Component2'
          label:'求职意向',
          show: true,
          ref: 'comp3',
          data: {
                position: '',
                city: '',
                salary: '',
                startDate: ''
              
          }
        },
        {
          module: 'Component4', // 此处必须是 'Component2'
          label:'项目经验',
          show: true,
          ref: 'comp4',
          data: {
                name: '',
                role: '',
                time: [],
                experience: ''
              
          }
        },
        {
          module: 'Component5',
          label:'实习经验' ,// 此处必须是 'Component2'
          show: true,
          ref: 'comp5',
          data: {
                company: '',
                position: '',
                time: [],
                experience: ''
          }
        },
        {
          module: 'Component6', 
          label:'校园经历',// 此处必须是 'Component2'
          show: true,
          ref: 'comp6',
          data: {
                name: '',
                role: '',
                time: [],
                 experience: ''
          }
        },
        {
          module: 'Component7', // 此处必须是 'Component2'
          label:'技能特长',
          show: true,
          ref: 'comp7',
          data: {
                customSkill: '',
                customSkills: []
          }
        },
        {
          module: 'Component8', // 此处必须是 'Component2'
          label:'荣誉证书',
          show:true,
          ref: 'comp8',
          data: {
                customHonor: '',
                customHonors: []
        }
      },
      {
          module: 'Component9', // 此处必须是 'Component2'
          label:'自我评价',
          show: true,
          ref: 'comp9',
          data: {
                content: ''
        }
      }
      ]
           
        };
    },
    mounted() {
    // 在页面加载完成后调用exportToPDF方法
    this.exportToPDF();
  },
    methods: {
        // 在这里放置组件的方法
        
    updateProgress() {
    // 根据业务逻辑计算新的进度百分比
    const newPercentage = 75; // 举例：假设新的百分比是 75
    this.completion_progress = newPercentage;
  },
  updateColors() {
    // 根据业务逻辑计算新的进度条颜色
    const newColor = '#67C23A'; // 举例：假设新的颜色是绿色
    this.progress_colors = newColor;
  },
        handleDragStart(/* event, index */) {
    // 处理拖拽开始的逻辑
  },
  handleDragOver(/* event, index */) {
    // 处理拖拽过程中的逻辑
  },
  handleDragEnter(/* event, index */) {
    // 处理拖拽进入的逻辑
  },
  handleDragEnd(/* event, index */) {
    // 处理拖拽结束的逻辑
  },
   beforeDel() {
    // 处理点击删除按钮之前的逻辑
    // 弹出确认删除对话框
    this.$confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
    }).then(() => {
    // 用户点击确定执行的操作
    // 此处可以添加删除逻辑，比如删除操作成功后跳转到首页并显示删除成功弹框
    this.$router.push('/');
    this.$message({
      type: 'success',
      message: '删除成功！'
    });
    }).catch(() => {
    // 用户点击取消不执行任何操作
    });
  },
  beforeSave() {
    // 处理点击保存按钮之前的逻辑
     this.$router.push({ path: '/' });

    // 弹出已保存的提示框
    this.$message.success('已保存！');
    
  },
     exportResume(fileType) {
      // 实际应用中，根据选择的文件类型和样式执行真正的导出操作
      if (fileType === 'doc') {
        // 执行导出 Word 文件操作
        // 此处应该调用生成 Word 文件的代码，例如：generateDoc(selectedStyle);

        // 模拟下载 Word 文件
        const downloadLink = document.createElement('a');
        downloadLink.href = 'path/to/your/word/file.doc';
        downloadLink.download = 'resume.doc';
        downloadLink.click();
      } else if (fileType === 'pdf') {
        // 此处不执行导出操作，而是显示确认导出为 PDF 的提示
        this.$confirm('确定要导出为 PDF 吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          // 用户确认导出为 PDF 后执行导出操作
          this.exportToPDF();
        }).catch(() => {
          // 用户取消导出为 PDF 不执行任何操作
        });
      } else {
        // 其他文件类型暂不支持
        this.$message.error('不支持的文件类型');
        return;
      }
    },
     beforeExport() {
      this.$confirm('确定要导出简历吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 弹出选择文件类型对话框
        this.$confirm('请选择要导出的文件类型', '选择文件类型', {
          confirmButtonText: 'PDF',
          cancelButtonText: 'DOC',
          type: 'info'
        }).then(() => {
          // 用户选择导出为 PDF
          const fileType = 'pdf'; // 设置文件类型为 PDF
          const styleIndex = this.exportForm.style_index;
          const selectedStyle = this.style_list[styleIndex];

          // 调用实际的导出方法
          this.exportResume(fileType, selectedStyle);

          // 在这里调用 exportToPDF() 方法
          this.exportToPDF();
        }).catch(() => {
          // 用户选择导出为 DOC
          const fileType = 'doc'; // 设置文件类型为 DOC
          const styleIndex = this.exportForm.style_index;
          const selectedStyle = this.style_list[styleIndex];

          // 调用实际的导出方法
          this.exportResume(fileType, selectedStyle);
        });
      }).catch(() => {
        // 用户点击取消不执行任何操作
      });
    },
     exportToPDF() {
      this.$confirm('确定要导出为 PDF 吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const buttons = document.querySelectorAll('.save, .oprate-box');
        buttons.forEach(button => {
          button.style.display = 'none';
        });
        const elementToExport = document.querySelector('.edit');
        elementToExport.style.backgroundImage = 'none'; // 移除背景图像

        html2canvas(elementToExport).then(canvas => {
          const pdf = new jsPDF('p', 'mm', 'a4');
          const imgData = canvas.toDataURL('image/png');
          const imgWidth = 210;
          const imgHeight = canvas.height * imgWidth / canvas.width;
          pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
          pdf.save('exported_resume.pdf');
          buttons.forEach(button => {
            button.style.display = 'block';
          });
        });
      }).catch(() => {
        // 用户点击取消不执行任何操作
      });
    },
  handleClose() {
    // 处理关闭导出简历对话框的逻辑
       this.dialogFormVisible = false;
  }
    }
};
</script>

<template>
  <div class="edit">
    <el-row :gutter="20" justify="space-around" style="margin:0;">
      <el-col :span="12" :offset="6" style="padding-left:0;padding-right:0;">
        <div class="title-container" style="text-align: center; font-size: larger; background-color: #E0F2F1; padding: 10px;"> <!-- 添加一个标题容器 -->
          <h4>求职简历编辑</h4>
        </div>
        <div class="content">
          <!-- 动态加载简历组件模块 -->
          <component v-for="(app, index) in modules" :key="index" :is="app.module" v-show="app.show"
                     v-bind:ref="app.ref" v-bind="app.data"></component>
        </div>
      </el-col>
      <el-col :span="5" :offset="1" style="padding-left:0;padding-right:0;position:relative;">
        <div class="oprate-box">
          <el-progress type="dashboard" :percentage="completion_progress" :color="progress_colors"
                       :width="60"></el-progress>
      <div class="module_list">
        <div class="module" v-for="(app, index) in modules" :key="index" draggable="true"
          @dragstart="handleDragStart($event, index)"
          @dragover.prevent="handleDragOver($event, index)"
          @dragenter="handleDragEnter($event, index)" @dragend="handleDragEnd($event, index)">
          <el-checkbox v-model="app.show" :disabled="app.module === 'BaseInfo' || app.module === 'PersonalIntroduction' || app.module === 'JobIntension'"></el-checkbox>
          <label>{{ app.label}}</label> <!-- 将 app.label 修改为 app.module -->
          <div v-if="app.module === 'BaseInfo' || app.module === 'PersonalIntroduction' || app.module === 'JobIntension'" class="mengceng"></div>
        </div>
      </div>
          <div class="save">
            <el-button v-if="id !== undefined" type="danger" size="small"
                       @click="beforeDel()">删除</el-button>
            <el-button v-if="id !== undefined"  type="success" size="small"
                       @click="beforeExport()">导出</el-button>
            <el-button type="primary" size="small" @click="beforeSave()">保存</el-button>
            
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="导出简历" @close="handleClose" v-model="dialogFormVisible" style="text-align:left;">
      <el-form :model="exportForm" ref="exportForm">
        <el-form-item label="文件的类型">
          <el-radio-group v-model="exportForm.file_type">
            <el-radio label="doc"></el-radio>
            <el-radio label="pdf"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="样式选择">
          <div class="style_list">
            <el-radio-group v-model="exportForm.style_index">
              <div class="style_one" v-for="(item, index) in style_list" :key="index">
                <div class="demo-image__preview">
                  <el-image style="width: 100px; height: 120px" :src="item.src"
                            :preview-src-list="srcList">
                  </el-image>
                </div>
                <div class="style_check">
                  <el-radio :label="index"><span></span></el-radio>
                </div>
              </div>
              <div class="style_one">
                <div class="my_style">
                  <el-color-picker v-model="my_style_color" :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="style_check">

                  <el-radio label="-1"><span
                    style="font-size:12px;font-weight:500;">自定义</span></el-radio>
                </div>
              </div>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="beforeExport()">导出</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<style>
/* 使用 :deep 伪类选择器确保样式应用到子组件中 */
/* 调整 label 的颜色为红色 */
:deep(.module) label {
  color: rgba(18, 13, 13, 0.797);
}
.content {
  background-color: white; /* 将内容区域背景设置为白色 */
  padding: 20px; /* 添加一些内边距 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 使用 :deep 伪类选择器确保样式应用到子组件中 */
:deep(.module) label {
  color: rgba(18, 13, 13, 0.797);
  font-size: 14px;
  font-family: Arial, sans-serif;
}
/* 调整 label 的字体大小为 16px */
:deep(.module) label {
  font-size: 14px;
}

/* 调整 label 的字体为 Arial */
:deep(.module) label {
  font-family: Arial, sans-serif;
}

/* 其他样式保持不变 */
/* 添加边框和间距 */
.module-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.oprate-box {
  margin-top: 50px; /* 调整上边距 */
}

/* 将保存、删除、导出按钮统一居中 */
.save {
  text-align: center;
}

/* 将进度条下移 */
.el-progress {
  margin-top: 20px; /* 调整上边距 */
}

/* 将模块复选框和标签垂直居中 */
.module {
  display: flex;
  align-items: center;
}
.module-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.edit {
  background: url('b.png') no-repeat center center fixed;
  background-size: cover;
  margin-bottom: 20px;
}
</style>